<template>
  <base-breadcrumb>
    <a-card
      :body-style="{ padding: '24px 32px' }"
      :bordered="false"
    >
      <title-name title="审批信息" />

      <a-row :gutter="24">
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="最后审批结果"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="form.opinions"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="最后审批时间"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="form.opinions"
              disabled
            />
          </a-form-item>
        </a-col>
      </a-row>

      <title-name title="审批流程信息" />
      <a-table
        :columns="columnApprove"
        :data-source="approveInfos"
        bordered
      >
        <span
          slot="serial"
          slot-scope="text, record, index"
        >{{ index + 1 }}</span>
        <span
          slot="action"
          slot-scope="text, record"
        >
          <template>
            <a @click="handleDels(record)">查看</a>
          </template>
        </span>
      </a-table>
    </a-card>

    <a-form>
      <a-card
        :body-style="{ padding: '24px 32px' }"
        :bordered="false"
      >
        <a-tabs
          ref="tabs"
          v-model="nextSteps"
          @change="callback"
        >
          <a-tab-pane
            key="1"
            tab="基本信息"
          >
            <a-row :gutter="24">
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="工程承包模式"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.contractModelName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="是否内部分包"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.innerPackageName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                v-if="isContract"
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="专业承包公司"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.contractBranchName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>

              <a-col
                v-if="isGeneral"
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="总承包单位"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.generalContractorCompanyName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="项目名称"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.projectName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="项目简称"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.projectOmit"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="项目编号"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.projectNum"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="一级地域"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.oneAreaName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="二级地域"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.secondAreaName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="三级地域"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.threeAreaName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="四级地域"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.fourAreaName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="地理坐标"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.longitude"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="详细地址"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.projectAddress"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="区域一级管辖单位(所属办事处)"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.jurisdictionOneName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="区域二级管辖单位(所属办事处)"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.jurisdictionTwoName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="承接名义"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.undertakeName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="实施单位(所属二级单位)"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.implementationTwoName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="实施单位(所属三级单位)"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.implementationThreeName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="项目类型"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.projectTypeName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="项目业态"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.projectFormatName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="结构类型"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.structureTypeName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="项目重要程度"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.projectImportanceName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="是否为重点项目"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.keyProjectsName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="局级大客户"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.bureauCustomerName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="公司级大客户"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.companyCustomerName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="客户级别"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.customerLevelName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="设计单位名称"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.designUnitName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="建设单位名称"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.constructionName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="建设单位性质"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.constructionNatureName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="建设单位社会统一信用代码"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.constructionCode"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="咨询单位名称"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.consultingName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="审计单位名称"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.auditName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="监理单位名称"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.supervisionName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="勘察单位名称"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.surveyName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>

            <a-row :gutter="24">
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="是否签订合同"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <a-radio-group v-model="dels.contractCode">
                    <a-radio :value="1">
                      已签订
                    </a-radio>
                    <a-radio :value="2">
                      未签订
                    </a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <a-col
                v-if="isContractMileage"
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="合同工程里程"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.contractMileage"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>

              <a-col
                v-if="isConstruction"
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="合同建筑面积-地上(万m2)"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.contractAreaGround"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>

              <a-col
                v-if="isConstruction"
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="合同建筑面积-地下(万m2)"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.contractAreaUnderground"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row
              v-if="isConstruction"
              :gutter="24"
            >
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="地上层数"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.groundFloor"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="地下层数"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.undergroundFloor"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="合同建筑总面积"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.contractTotalArea"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="合同单体工程个数"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.contractSingleProject"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="最高长单位工程最高(长)单位工程米数(Km)"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.engineeringMeters"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="维保期时间"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.maintenanceTime"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="合同开工日期"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <a-date-picker
                    v-model="dels.contractStartDate"
                    disabled
                    placeholder="请选择日期"
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="合同竣工日期"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <a-date-picker
                    v-model="dels.contractEndDate"
                    disabled
                    style=" "
                    placeholder="请选择日期"
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="合同工期"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <a-date-picker
                    v-model="dels.contractDays"
                    disabled
                    placeholder="合同工期"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="合同额(万)"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.contractValue"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="自有施工合同额(万)"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.ownerContractValue"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="备案项目经理"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.projectManagerName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col
                :md="12"
                :sm="12"
              >
                <a-form-item
                  label="项目特点或难点"
                  :label-col="{ lg: { span: 6 }, sm: { span: 6 } }"
                  :wrapper-col="{ lg: { span: 16 }, sm: { span: 16 } }"
                >
                  <BaseInput
                    v-model="dels.projectFeatures"
                    type="textarea"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="12"
                :sm="12"
              >
                <a-form-item
                  label="主施工范围"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.mainScope"
                    type="textarea"
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col
                :md="12"
                :sm="12"
              >
                <a-form-item
                  label="计划创优级别"
                  :label-col="{ lg: { span: 6 }, sm: { span: 6 } }"
                  :wrapper-col="{ lg: { span: 16 }, sm: { span: 16 } }"
                >
                  <BaseInput
                    v-model="dels.excellencePlanName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="12"
                :sm="12"
              >
                <a-form-item
                  label="计划观摩级别"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.observePlanName"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col
                :md="12"
                :sm="12"
              >
                <a-form-item
                  label="计划创优内容"
                  :label-col="{ lg: { span: 6 }, sm: { span: 6 } }"
                  :wrapper-col="{ lg: { span: 16 }, sm: { span: 16 } }"
                >
                  <BaseInput
                    v-model="dels.excellentContent"
                    type="textarea"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="12"
                :sm="12"
              >
                <a-form-item
                  label="计划观摩内容"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.observeContent"
                    type="textarea"
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="项目设计管理类别"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.groundFloor"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="项目科技管理类别"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.undergroundFloor"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-item
                  label="项目类别（质量）"
                  :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
                >
                  <BaseInput
                    v-model="dels.contractTotalArea"
                    type="text"
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>

            <a-button
              style="float:right;"
              type="primary"
              @click="nextStep()"
            >
              下一页
            </a-button>
          </a-tab-pane>

          <a-tab-pane
            key="2"
            tab="项目部设置"
          >
            <title-name title="项目领导班子人员配置" />
            <a-table
              :columns="columns"
              :data-source="projectPost"
              bordered
            >
              <span
                slot="serial"
                slot-scope="text, record, index"
              >{{ index + 1 }}</span>
              <span
                slot="employeeName"
                slot-scope="record"
              >
                <template>
                  {{ record.staffList.map(s=>s.staffName).join(',') }}
                </template>
              </span>
              <span
                slot="employeeNum"
                slot-scope="record"
              >
                <template>
                  <span
                    v-for="(staff,index) in record.staffList"
                    :key="staff"
                  >
                    <span v-if="index !=0 ">,</span>
                    <sapn
                      v-if="staff.statusCode == 0 "
                      style="color:rgba(0, 0, 0, 0.65)"
                    >{{ staff.staffCode }}</sapn>
                    <sapn
                      v-else-if="staff.statusCode != 0 "
                      style="color:red;"
                    >{{ staff.staffCode }}</sapn>
                  </span>
                </template>
              </span>
              <span
                slot="status"
                slot-scope="record"
              >
                <template>
                  {{ record.staffList.map(s=>s.statusName).join(',') }}
                </template>
              </span>
            </a-table>

            <title-name
              title="其他岗位人员配置"
              class="maginTop"
            />

            <a-table
              :columns="columns"
              :data-source="otherPost"
              bordered
            >
              <span
                slot="serial"
                slot-scope="text, record, index"
              >{{ index + 1 }}</span>
              <span
                slot="employeeName"
                slot-scope="record"
              >
                <template>
                  {{ record.staffList.map(s=>s.staffName).join(',') }}
                </template>
              </span>
              <span
                slot="employeeNum"
                slot-scope="record"
              >
                <template>
                  <span
                    v-for="(staff,index) in record.staffList"
                    :key="staff"
                  >
                    <span v-if="index !=0 ">,</span>
                    <sapn
                      v-if="staff.statusCode == 0 "
                      style="color:rgba(0, 0, 0, 0.65)"
                    >{{ staff.staffCode }}</sapn>
                    <sapn
                      v-else-if="staff.statusCode != 0 "
                      style="color:red;"
                    >{{ staff.staffCode }}</sapn>
                  </span>
                </template>
              </span>
              <span
                slot="status"
                slot-scope="record"
              >
                <template>
                  {{ record.staffList.map(s=>s.statusName).join(',') }}
                </template>
              </span>
            </a-table>

            <a-button
              class="floatRight maginTop"
              type="primary"
              @click="nextStep()"
            >
              下一页
            </a-button>
          </a-tab-pane>

          <a-tab-pane
            key="3"
            tab="附件上传"
          />
        </a-tabs>
      </a-card>
    </a-form>

    <a-modal
      v-model="visibles"
      width="900px"
    >
      <template slot="footer">
        <a-button
          key="back"
          @click="handleCancels"
        >
          关闭
        </a-button>
      </template>
      <a-row>
        <a-col
          :md="24"
          :sm="24"
        >
          <a-form-item
            label="审批意见"
            :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
            :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
          >
            <BaseInput
              v-model="forms.branch"
              type="textarea"
              disabled
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col
          :md="12"
          :sm="12"
        >
          <a-form-item
            label="审批人"
            :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
            :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
          >
            <BaseInput
              v-model="forms.projectNum"
              type="text"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col
          :md="12"
          :sm="12"
        >
          <a-form-item
            label="审批时间"
            :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
            :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
          >
            <BaseInput
              v-model="forms.projectNum"
              type="text"
              disabled
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col
          :md="12"
          :sm="12"
        >
          <a-form-item
            label="节点名称"
            :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
            :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
          >
            <BaseInput
              v-model="forms.projectNum"
              type="text"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col
          :md="12"
          :sm="12"
        >
          <a-form-item
            label="滞留时间"
            :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
            :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
          >
            <BaseInput
              v-model="forms.projectNum"
              type="text"
              disabled
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-modal>
  </base-breadcrumb>
</template>

<script>
import FooterToolBar from '@/components/FooterToolbar'
import {
  getDesignType,
  getProjectsDel,
  editBranchInfo,
  getDepartConfig,
  addDepartmentConfig,
  getInstallationBranchId,
  getProjectTypes
} from '@/api/project/projects'
import { getProjectypesList } from '@/api/project/projectypes'
import { getImportantsList } from '@/api/project/importants'
import { getCustomerList, getCustomersOne } from '@/api/project/customers'

const columnApprove = [
  {
    title: '审批序号',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '审批人',
    dataIndex: ''
  },
  {
    title: '审批时间',
    dataIndex: ''
  },
  {
    title: '节点名称',
    dataIndex: ''
  },
  {
    title: '滞留时间',
    dataIndex: ''
  },
  {
    title: '审批意见',
    dataIndex: ''
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' }
  }
]
const columns = [
  {
    title: '序号',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '岗位名称',
    dataIndex: 'jobName',
    width: '15%'
  },
  {
    title: '岗位人员姓名',
    width: '40%',
    scopedSlots: { customRender: 'employeeName' }
  },
  {
    title: '员工编号',
    scopedSlots: { customRender: 'employeeNum' }
  },
  {
    title: '状态',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]
const columns1 = [
  {
    title: '序号',
    dataIndex: 'name',
    width: '10%',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '附件名称',
    dataIndex: 'annuxName',
    width: '15%',
    scopedSlots: { customRender: 'age' }
  },
  {
    title: '附件格式',
    dataIndex: 'annux',
    scopedSlots: { customRender: 'annux' }
  },
  {
    title: '附件地址',
    dataIndex: 'annuxAddress',
    width: '40%',
    scopedSlots: { customRender: 'annuxAddress' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  name: 'StandardList',
  components: {
    FooterToolBar
  },
  props: {
    text: String
  },
  data() {
    return {
      forms: {},

      visibles: false,
      columnApprove,
      approveInfos: [], // 审批流程信息

      visible: false, // 人员配置调整
      confirmLoading: false,
      mdl: null, // 数据

      projectModecode: '', // 工程承包模式code
      projectModeId: '', // 工程承包模式
      isContract: false, // 专业承包分公司
      isGeneral: false, // 总承包公司

      editable: false,
      projectNum: '',

      nextSteps: '1',

      selectDatas: {}, // 立项返回下拉数据

      columns,
      columns1,
      editingKey: '',
      selectedRowKeys: [],

      value: 1, // 是否签订合同

      previewImage: '',

      data: [{ postName: '项目经理', employeeName: '张三', employeeNum: '231231' }],

      queryParam: {
        projectName: '',
        name: ''
      },
      form: this.$form.createForm(this),
      status: 'all',
      areaCode: '',
      employeeNum: '', // 项目部设置人员调整编号
      isContractMileage: false, // 线性基础数据
      isConstruction: false, // 房建
      id: '', // 项目id
      branchCode: '', // 是否是分公司 科技管理中心
      dels: {},
      designTypes: [],
      qualityTypes: [], // 项目类别 质量

      projectPost: [], // 项目人员岗位设置
      otherPost: [] //  其他人员岗位设置
    }
  },
  created() {
    this.id = this.$route.query.projectId
    this.branchCode = this.$route.query.branchCode

    localStorage.setItem('projectId', this.id)

    this.getInstallationBranchId()
    this.getDesignType()
    this.getDepartConfig()
    this.getDepartConfigs()
    this.getProjectTypes()
  },
  computed: {},
  methods: {
    handelDeal() {
      // 确定处理
    },

    handleDels() {
      this.visibles = true
    },

    handleCancels() {
      this.visibles = false
    },

    handelUnApproval() {
      // 审批不通过
      this.$confirm({
        title: '警告提醒！',
        content: '确定审批不通过？',
        okType: 'danger',
        onOk() {},
        onCancel() {}
      })
    },

    handelApproval() {
      // 审批通过
      this.$confirm({
        title: '警告提醒！',
        content: '确定审批通过？',
        okType: 'danger',
        onOk() {},
        onCancel() {}
      })
    },

    employeeNums(val) {
      this.employeeNum = val
    },
    getProjectTypes() {
      getProjectTypes().then((res) => {
        this.qualityTypes = res.data
      })
    },

    handleEdit(record) {
      let _this = this
      _this.visible = true
      _this.mdl = { ...record }
    },

    getDesignType() {
      getDesignType().then((res) => {
        this.designTypes = res.data
      })
    },
    getInstallationBranchId() {
      let id = localStorage.getItem('projectId')
      getProjectsDel(id).then((res) => {
        this.dels = res.data

        this.form.setFieldsInitialValue(res.data)

        console.log('返回详情数据：', this.dels)
        if (this.dels.innerPackageName == '是') {
          this.isContract = true
        }
        if (this.dels.projectTypeCode == 'fj') {
          this.isContractMileage = false
          this.isConstruction = true
        }
        if (this.dels.projectTypeCode == 'xxjcss') {
          this.isContractMileage = true
          this.isConstruction = false
        } else {
          this.isContractMileage = false
          this.isConstruction = true
        }
      })
    },
    getDepartConfig() {
      // 项目岗位设置
      let proId = localStorage.getItem('projectId')
      getDepartConfig({ projectId: proId, projectJobType: 1 }).then((res) => {
        this.projectPost = res.data.postConfigList
      })
    },
    getDepartConfigs() {
      // 其他岗位设置
      let proId = localStorage.getItem('projectId')
      getDepartConfig({ projectId: proId, projectJobType: 0 }).then((res) => {
        this.otherPost = res.data.postConfigList
      })
    },

    callback(key) {
      // tabs切换
      this.nextSteps = key
      if (this.nextSteps == 2) {
        this.form.validateFields((err, values) => {
          if (!err) {
            values.projectId = localStorage.getItem('projectId')
            editBranchInfo(values).then((res) => {
              if (res.code == 200) {
                this.$message.success('保存成功！')
                this.nextSteps = '2'
              }
            })
          } else {
            this.nextSteps = '1'
          }
        })
      }
    },
    handleCancel() {
      let _this = this
      _this.visible = false
      const form = _this.$refs.createModal.form
      form.resetFields() // 清理表单数据
    },

    nextStep() {
      // 下一步
      let steps = this.nextSteps
      if (steps == '1') {
        this.nextSteps = '2'
      }
      if (steps == '2') {
        this.nextSteps = '3'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper-row {
  padding-left: 55px;
  font-weight: bold;
  letter-spacing: 1px;
}

/deep/ .ant-form-item label {
  font-size: 12px;
}

/deep/ .ant-btn {
  border-radius: 5px;
}

/deep/ .ant-input {
  /*width: 70%;*/
  border-radius: 5px;
}

/deep/ .ant-card.ant-card-bordered {
  border-radius: 5px;
}

.ant-avatar-lg {
  width: 48px;
  height: 48px;
  line-height: 48px;
}

.list-content-item {
  color: rgba(0, 0, 0, 0.45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;
  span {
    line-height: 20px;
  }
  p {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 22px;
  }
}

.title-name {
  border-left: 5px solid #1890ff;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 20px;
  padding-left: 15px;
  height: 20px;
  line-height: 20px;
}

/deep/ .table-page-search-wrapper .ant-form-inline .ant-row .ant-col.ant-col-sm-24.ant-col-md-12 {
  padding-left: 80px;
}
</style>

